<template>
  <div class="albums-container">
    <img src="@/assets/images/背景03.jpg" class="albums-bgc">
    <!-- 专辑信息区域 -->
    <div class="songs-box">
      <div class="songs-img">
        <img :src="songsInfo.picUrl">
        <span class="iconfont icon-zhuanji1"></span>
      </div>
      <div class="songs-content">
        <div class="title">
          <div class="songs-title">
            <el-tag effect="plain" size="mini" class="tag">专辑</el-tag>
            <h1>{{ songsInfo.name }} <span v-if="songsInfo.alias">{{ songsInfo.alias[0] }}</span></h1>
          </div>
        </div>
        <div class="btn-songs">
          <div class="playall" @click="playAll">
            <i class="el-icon-caret-right"></i>
            <span>播放全部</span>
            <i class="el-icon-plus"></i>
          </div>
          <div class="star" @click="collection">
            <i class="el-icon-folder-checked" v-if="songDetail.isSub"></i>
            <i class="el-icon-folder-add" v-else></i>
            <span v-if="songDetail.isSub" @click.stop="collection"> 已收藏 {{ songDetail.subCount }}</span>
            <span v-else @click.stop="collection"> 收藏 {{ songDetail.subCount }}</span>
          </div>
          <div class="share">
            <i class="el-icon-share"></i>
            <span v-if="songsInfo.info">分享 {{ songsInfo.info.shareCount }}</span>
          </div>
          <div class="down">
            <i class="el-icon-bottom"></i>
            <span>下载全部</span>
          </div>
        </div>
        <div class="songs-synopsis">
          <p>歌手：<span @click="$router.push('/artists/' + songsInfo.artist.id)" v-if="songsInfo.artist">{{
          songsInfo.artist.name
          }}</span></p>
          <p>时间：{{ songsInfo.publishTime | formatTime }}</p>
        </div>
      </div>
    </div>

    <!-- 专辑内歌曲信息 -->
    <div class="songs-int">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <!-- 歌曲展示区域 -->
        <el-tab-pane label="歌曲列表" name="first" :lazy="true">
          <el-table style="width: 100%" :data="songs" lazy size="mini" @row-dblclick="getSongInfo">
            <el-table-column type="index" width="50" align="center"></el-table-column>
            <el-table-column prop="prop" label="操作" width="80">
              <template slot-scope="{row}">
                <div class="control">
                  <span class="iconfont icon-xihuan" @click="addmyLove(row)"></span>
                  <span class="iconfont icon-xiazai" @click="download(row)"></span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="音乐标题" width="width" show-overflow-tooltip>
              <template slot-scope="{row}">
                <div class="title-tags">
                  <span class="song-title">{{ row.name }}<i v-if="row.alia.length > 0">({{ row.alia[0]
                  }})</i></span>
                  <div class="tags">
                    <el-tag v-if="row.fee == 1" effect="plain" size="mini" class="vip-tag">VIP</el-tag>
                    <el-tag v-if="row.sq" effect="plain" size="mini" class="sq-tag">SQ</el-tag>
                    <el-tag v-if="row.mv" effect="plain" size="mini" class="sq-tag"
                      @click="$router.push('/mv/' + row.mv)">MV<i class="el-icon-caret-right"></i></el-tag>
                    <i v-if="row.pc" class="el-icon-cloudy"></i>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="歌手" width="150" show-overflow-tooltip>
              <template slot-scope="{row}">
                <span class="arname" @click="$router.push('/artists/' + row.ar[0].id)">{{ row.ar[0].name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="专辑" width="150" show-overflow-tooltip>
              <template slot-scope="{row}">
                <span @click="$router.push('/albums/' + row.id)" class="song-title">{{ row.al.name }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="dt" width="60" label="时长">
            </el-table-column>
            <el-table-column label="热度" width="100" align="center">
              <template slot-scope="{row}">
                <el-progress :percentage="row.pop" color="#d83b55" :show-text="false" :stroke-width="5"></el-progress>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 评论区域 -->
        <el-tab-pane :label="`评论(${commentCount})`" name="second">
          <div class="comment-box">
            <!-- 评论框区域 -->
            <div class="comment-text">
              <textarea class="text" v-model="contentList"></textarea>
              <button class="comment-btn" @click="goComment">评论</button>
            </div>

            <!-- 评论列表区域 -->
            <div class="comment-list">
              <h4>全部评论({{ totals }})</h4>
              <div class="conment-item" v-for="item in comments" :key="item.commentId">
                <img class="useravatar" :src="item.user.avatarUrl"
                  @click="$router.push('/userprofiles/' + item.user.userId)">
                <div class="content">
                  <div class="list">
                    <p><span @click="$router.push('/userprofiles/' + item.user.userId)">{{ item.user.nickname
                    }}：</span>{{ item.content }}</p>
                  </div>
                  <div v-if="item.beReplied.length > 0" class="answer"><span
                      @click="$router.push('/userprofiles/' + item.beReplied[0].user.userId)" class="userNickname">@{{
                      item.beReplied[0].user.nickname
                      }}：</span>
                    <span>{{ item.beReplied[0].content }}</span>
                  </div>
                  <span class="time">{{ item.timeStr }}</span>
                </div>
                <div class="content-btn">
                  <span :class="{ 'iconfont': true, 'icon-dianzan': true, 'active': item.liked }"
                    @click="dianzan(item)"><i v-show="item.likedCount">{{ item.likedCount }}</i></span>
                  <span class="iconfont icon-pinglun" @click="pinglun(item)"></span>
                </div>
              </div>
            </div>

            <!-- 分页器区域 -->
            <div class="fenye" v-if="totals >= 20">
              <el-pagination background layout="prev, pager, next" :current-page="page" :page-size="limit"
                :total="totals" @current-change="handleCurrentChange">
              </el-pagination>
            </div>
          </div>
        </el-tab-pane>
        <!-- 收藏者区域 -->
        <el-tab-pane label="专辑详情" name="third">
          <div class="fav-box">
            <h3>专辑介绍</h3>
            <p v-for="(item, index) in songsInfo.description" :key="index">{{ item }}</p>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import axios from '@/request/request'
export default {
  data() {
    return {
      offset: 1,
      // 专辑信息
      songsInfo: {},
      // 专辑动态信息
      songDetail: {},
      // 专辑名称
      songsTitle: '',
      // 分页标签参数
      activeName: 'first',
      // 专辑所有歌曲数组
      songs: [],
      // 获取评论数
      limit: 20,
      // 评论列表
      comments: [],
      // 发表的评论内容
      contentList: '',
      totals: 0,
      page: 1,
      t: 1,
      url: '',
      commentId: '',
      section: null
    }
  },
  computed: {
    commentCount() {
      const a = this.songsInfo.info || {}
      return a.commentCount || ''
    },
    avatar() {
      const avator = this.songsInfo.creator || {}
      return avator
    },
    total() {
      const count = this.songsInfo.trackIds || []
      return count.length
    },
    tags() {
      const tag = this.songsInfo.tags || []
      return tag
    },
    createTime() {
      return new Date(parseInt(this.songsInfo.createTime)).toLocaleString()
    }
  },
  created() {
    const id = this.$route.params.id
    this.getPlaylist(id)
  },
  methods: {
    // 获取专辑歌曲
    async getPlaylist(id) {
      this.activeName = 'first'
      this.getSongsDetail(id)
      const { data: res } = await axios.get(`/album?id=${id}`)
      if (res.code == 200) {
        if (res.album.description) {
          res.album.description = res.album.description.split('\n')
        }
        this.songsInfo = res.album
        res.songs.forEach(item => {
          item.dt = this.format(item.dt)
        })
        this.songs = res.songs
      }
    },
    async getSongsDetail(id) {
      // 获取专辑动态详情
      const { data: res1 } = await axios.get(`/album/detail/dynamic?id=${id}`)
      if (res1.code == 200) {
        this.songDetail = res1
      }
    },
    // 格式化歌曲毫秒数
    format(dt) {
      let m = parseInt(dt / 1000 / 60)
      let s = ((dt / 1000) % 60).toFixed(0)
      if (m < 10) {
        m = '0' + m
      }
      if (s < 10) {
        s = '0' + s
      }
      return m + ':' + s
    },
    async handleClick(tab, event) {
      if (tab.name == 'second') {
        this.getCommentsList()
      }
    },
    // 获取评论列表
    async getCommentsList() {
      const { data: res } = await axios.get(`/comment/album?id=${this.songsInfo.id}&limit=${this.limit}&offset=${this.page}`)
      if (res.code == 200) {
        this.comments = res.comments
        this.totals = res.total
      }
    },
    // 分页器页码变化函数
    handleCurrentChange(page) {
      this.page = page
      this.getCommentsList()
      window.scrollTo(0, 0)
    },
    // 点赞按钮
    async dianzan(item) {
      if (item.liked) {
        const { data: res1 } = await axios.post(`/comment/like?id=${this.songsInfo.id}&cid=${item.commentId}&t=0&type=2`)
        if (res1.code == 200) {
          this.$message.success('取消点赞成功')
          this.getCommentsList()
        }
      } else {
        const { data: res2 } = await axios.post(`/comment/like?id=${this.songsInfo.id}&cid=${item.commentId}&t=1&type=2`)
        if (res2.code == 200) {
          this.$message.success('点赞成功')
          this.getCommentsList()
        }
      }
    },
    // 回复按钮
    async pinglun(item) {
      this.contentList = '回复' + item.user.nickname + ': '
      this.commentId = item.commentId
    },
    // 评论按钮
    async goComment() {
      if (this.contentList.trim() == '') return this.$message.warning('请输入评论内容')
      const reg = /^回复/
      if (reg.test(this.contentList)) {
        this.t = 2
        this.url = `/comment?t=${this.t}&type=3&id=${this.songsInfo.id}&content=${this.contentList}&commentId=${this.commentId}`
      } else {
        this.t = 1
        this.url = `/comment?t=${this.t}&type=3&id=${this.songsInfo.id}&content=${this.contentList}`
      }
      const { data: res } = await axios.post(this.url)
      if (res.code == 200) {
        if ((this.t = 1)) {
          this.$message.success('评论成功!')
        } else {
          this.$message.success('回复成功!')
        }
        this.contentList = ''
        this.page = 1
        this.getCommentsList()
      }
    },
    // 收藏专辑
    async collection() {
      if (this.songDetail.isSub) {
        this.t = 0
      } else {
        this.t = 1
      }
      const { data: res } = await axios.post(`/album/sub?t=${this.t}&id=${this.songsInfo.id}`)
      if (res.code == 200) {
        if (this.t == 1) {
          this.$message.success(res.message || '收藏成功')
          this.songDetail.isSub = true
        } else {
          this.$message.success(res.message || '取消收藏成功')
          this.songDetail.isSub = false
        }
        // this.getSongsDetail(this.songsInfo.id)
      }
    },
    // 添加到我的喜欢音乐
    async addmyLove(row) {
      const { data: res } = await axios.post(`/like?id=${row.id}`)
      if (res.code == 200) {
        this.$message.success('喜欢成功')
      }
    },
    // 点击获取下载链接
    async download(row) {
      const { data: res } = await axios.get(`/song/download/url?id=${row.id}`)
      if (res.code == 200) {
        this.$download(res)
      }
    },
    // 表格行双击事件
    getSongInfo(row) {
      this.$store.dispatch('audio/getSongUrl', row)
      this.$store.commit('audio/updateNowPlayList', this.songs)
    },
    // 播放全部按钮点击事件
    playAll() {
      this.$store.dispatch('audio/getSongUrl', this.songs[0])
      this.$store.commit('audio/updateNowPlayList', this.songs)
    }
  },
}
</script>

<style lang="less" scoped>
@media screen and (max-width:1500px) {
  .albums-container {
    width: 70% !important;
  }
}

@media screen and (max-width:1000px) {
  .albums-container {
    width: 100% !important;
  }
}

/deep/ .el-table {
  background-color: transparent;
}

/deep/ .el-table__expanded-cell {
  background-color: transparent;

}

/deep/ .el-table tr {
  background-color: transparent;
}

/deep/ .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom: none;
}

/deep/ .el-table th.el-table__cell {
  background-color: transparent;
}

.albums-container {
  box-sizing: border-box;
  padding: 10px;
  margin: 0 auto;
  width: 50%;
  margin-top: 3.7%;
  background-color: rgba(#fff, 0.75);
  border-radius: 10px;
  min-height: 90%;

  .albums-bgc {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
  }

  // 专辑信息
  .songs-box {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 230px;
    // background-color: pink;
    padding: 10px;
    text-align: start;
    cursor: default;

    .songs-img {
      position: relative;
      width: 230px;
      height: 230px;
      margin-right: 50px;

      img {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 20;
        overflow: hidden;
        border-radius: 6px;

      }

      .icon-zhuanji1 {
        position: absolute;
        top: 50%;
        right: -110px;
        z-index: 10;
        transform: translateY(-50%);
        font-size: 200px;
        color: rgb(52, 52, 52);
      }
    }

    .songs-content {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 70%;
      height: 60%;

      // background-color: rgb(206, 52, 52);
      .title {
        display: flex;
        flex-direction: column;

        .songs-title {
          display: flex;
          align-items: center;

          .tag {
            color: #962ed6;
            border: 1px solid #962ed6;
            margin-right: 10px;
            font-size: 15px;
          }

          h1 {
            margin: 0;
            font-size: 20px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;

            span {
              color: rgb(196, 196, 196);
            }
          }
        }

        .user {
          display: flex;
          align-items: center;
          font-size: 14px;
          margin-top: 10px;
          cursor: default;

          img {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background-color: rgb(172, 116, 116);
            overflow: hidden;
          }

          p {
            margin: 0 10px;
            color: #516aa0;
          }

          span {
            color: #d2d2d2;
          }
        }
      }

      .btn-songs {
        width: 85%;
        display: flex;
        justify-content: space-between;
        padding-right: 40px;
        cursor: default;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;

        .playall {
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          width: 150px;
          height: 34px;
          color: #fff;
          font-size: 14px;
          border-radius: 17px;
          background-color: #962ed6;
          transition: all 0.3s;

          &:hover {
            background-color: #7e2fae;
          }

          .el-icon-caret-right {
            font-size: 20px;
            font-weight: 700;
          }

          .el-icon-plus {
            font-size: 18px;
          }
        }

        .star {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 34px;
          border: 1px solid rgb(192, 192, 192);
          padding: 0 15px;
          border-radius: 17px;
          font-size: 14px;
          transition: all 0.3s;

          &:hover {
            background-color: rgb(238, 238, 238);

          }

          .el-icon-folder-checked {
            font-size: 20px;
            margin-right: 3px;
            transform: translateY(1px);
          }

          .el-icon-folder-add {
            font-size: 20px;
            margin-right: 3px;
            transform: translateY(1px);
          }
        }

        .share {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 34px;
          border-radius: 17px;
          padding: 0 15px;
          font-size: 14px;
          border: 1px solid rgb(192, 192, 192);
          transition: all 0.3s;

          &:hover {
            background-color: rgb(238, 238, 238);
          }

          .el-icon-share {
            font-size: 18px;
            margin-right: 5px;
            transform: translateY(1px);
          }
        }

        .down {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 34px;
          border-radius: 17px;
          padding: 0 15px;
          font-size: 14px;
          border: 1px solid rgb(192, 192, 192);
          transition: all 0.3s;

          &:hover {
            background-color: rgb(238, 238, 238);

          }

          .el-icon-bottom {
            font-size: 18px;
          }
        }
      }

      .songs-synopsis {
        display: flex;
        flex-direction: column;
        cursor: default;

        p {
          margin: 4px 0;
          font-size: 14px;

          span {
            color: #3d6dd3;
          }
        }

        .description {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          cursor: copy;
        }
      }
    }
  }

  // 歌曲信息列表
  .songs-int {
    width: 100%;
    padding: 10px;
    margin: 10px auto;
    cursor: default;

    .control {
      .icon-xiazai {
        font-size: 20px;
        margin-left: 5px;

        &:hover {
          font-weight: 700;
        }
      }

      .icon-xihuan {
        &:hover {
          font-weight: 700;
        }
      }
    }

    .title-tags {
      display: flex;

      .tags {
        display: flex;
        align-items: center;

        .vip-tag {
          color: #d83b55;
          border: 1px solid #d83b55;
          margin-left: 3px;
        }

        .sq-tag {
          color: #962ed6;
          border: 1px solid #962ed6;
          margin-left: 3px;
        }

        /deep/ .el-icon-cloudy {
          font-size: 20px;
          // transform: translateY(4px);
          margin-left: 3px;
        }
      }
    }

    .song-title {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      font-size: 14px;

      i {
        color: #9e9d9d;
        font-style: normal;
      }
    }

    .arname {
      font-size: 14px;
    }

    /deep/ .el-tabs__item:hover {
      color: #962ed6;
    }

    /deep/ .el-tabs__item.is-active {
      color: #962ed6;
      font-size: 20px;
      font-weight: 700;
    }

    /deep/ .el-tabs__active-bar {
      background-color: #962ed6;
      height: 4px;
    }

    /deep/ .el-tabs__nav-wrap::after {
      height: 0;
    }

    /deep/ .el-tag--mini {
      height: 16px;
      line-height: 16px;
      padding: 0 2px;
    }
  }

  // 评论区域
  .comment-box {
    padding: 10px 0;
    padding-bottom: 50px;
    width: 100%;
    cursor: default;

    .fenye {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      margin-top: 20px !important;
    }

    .comment-text {
      display: flex;
      position: relative;
      justify-content: center;
      width: 100%;
      height: 130px;

      .text {
        width: 100%;
        height: 70px;
        outline: none;
        border: 1px solid rgb(199, 199, 199);
        border-radius: 5px;
        resize: none;
        font-size: 14px;
      }

      .comment-btn {
        position: absolute;
        right: 0;
        bottom: 10px;
        height: 30px;
        padding: 0 20px;
        border-radius: 15px;
        background-color: #fff;
        border: 1px solid rgb(199, 199, 199);
      }
    }

    .comment-list {
      position: relative;
      text-align: start;

      h4 {
        margin: 0;
        font-size: 15px;
      }

      .conment-item {
        display: flex;
        position: relative;
        width: 100%;
        margin-top: 10px;
        padding: 15px 0;
        border-bottom: 1px solid rgb(227, 227, 227);
        font-size: 13px;

        .content-btn {
          display: flex;
          align-items: center;
          position: absolute;
          right: 10px;
          bottom: 5px;
          text-align: center;

          .icon-pinglun {
            font-size: 16px;

            &:hover {
              font-weight: 700;
            }
          }

          .icon-dianzan {
            font-size: 21px;
            margin-right: 10px;
            padding: 0 10px;
            border-right: 1px solid rgb(207, 207, 207);

            i {
              font-style: normal;
              font-size: 14px;
              color: rgb(163, 163, 163);
            }

            &:hover {
              font-weight: 700;
            }

            &.active {
              color: #c00000;
              font-weight: 700;
            }
          }
        }

        .useravatar {
          width: 44px;
          height: 44px;
          border-radius: 50%;
          margin-right: 20px;
          // background-color: pink;
        }

        .content {
          display: flex;
          flex-direction: column;

          .list {
            margin-bottom: 10px;

            p {
              margin: 0;
              word-break: break-all;
              word-wrap: break-word;

              span {
                color: #4680d1;
                font-size: 16px;
              }
            }
          }

          span {
            color: rgb(95, 95, 95);
          }

          .answer {
            background-color: rgb(228, 228, 228);
            margin: 0;
            padding: 5px;
            margin-left: 10px;
            margin-bottom: 10px;
            border-radius: 4px;
            word-break: break-all;
            word-wrap: break-word;

            span {
              color: rgb(56, 56, 56);
            }

            .userNickname {
              color: #4680d1;
              font-size: 14px;
            }
          }
        }
      }
    }
  }

  // 收藏者区域
  .fav-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    // justify-content: start;
    cursor: default;

    h3 {
      margin: 0;
      font-size: 16px;
      margin-bottom: 10px;
    }

    p {
      font-size: 15px;
      color: rgb(124, 124, 124);
      text-align: start;
      text-indent: 2em;
      line-height: 30px;
      margin: 5px;
    }
  }
}
</style>